<template>
  <div class="components-container">
    <el-button type="primary" @click="dialogTableVisible = true">
      open a Drag Dialog
    </el-button>
    <el-dialog  v-model="dialogTableVisible" title="Shipping address" draggable>
      <el-select ref="select" v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-table :data="gridData">
        <el-table-column property="date" label="Date" width="150" />
        <el-table-column property="name" label="Name" width="200" />
        <el-table-column property="address" label="Address" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DragDialogDemo'
}
</script>

<script setup>
import { reactive, ref } from 'vue'

const dialogTableVisible = ref(true)
const options = reactive([
  { value: '选项1', label: '黄金糕' },
  { value: '选项2', label: '双皮奶' },
  { value: '选项3', label: '蚵仔煎' },
  { value: '选项4', label: '龙须面' }
])

const value = ref('')
const gridData = reactive([{
  date: '2016-05-02',
  name: 'John Smith',
  address: 'No.1518,  Jinshajiang Road, Putuo District'
}, {
  date: '2016-05-04',
  name: 'John Smith',
  address: 'No.1518,  Jinshajiang Road, Putuo District'
}, {
  date: '2016-05-01',
  name: 'John Smith',
  address: 'No.1518,  Jinshajiang Road, Putuo District'
}, {
  date: '2016-05-03',
  name: 'John Smith',
  address: 'No.1518,  Jinshajiang Road, Putuo District'
}])
const select = ref()

</script>

<style scoped>

</style>
